<template>
  <view class="layout">
    <!-- 导航栏区域 -->
    <view class="navbar">
      <view class="statusBar" :style="{height:getStatusBarHeight()+'px'}"></view>
      <view class="titleBar" :style="{height:getTitleBarHeight()+'px',marginLeft:getLeftIconLeft()+'px'}">
        <!-- 标签栏 -->
        <view class="nav-tab">
          <view 
            v-for="(item, index) in tabs" 
            :key="index" 
            class="tab-item" 
            :class="{ active: currentTab === index }" 
            @click="switchTab(index)"
          >
            {{ item }}
          </view>
        </view>
      </view>
    </view>

    <!-- 填充区域，避免内容被导航栏遮盖 -->
    <view class="fill" :style="{height:getNavBarHeight() +'px'}"></view>

    <!-- 内容切换区域 -->
    <swiper class="content-swiper" :current="currentTab" @change="swiperChange">
      <!-- 好友页面 -->
      <swiper-item>
        <view class="page friend-page">
          <!-- 动态列表 -->
          <view class="dynamic-list">
            <view 
              class="dynamic-item" 
              v-for="(item, index) in friendDynamics" 
              :key="index"
            >
              <!-- 顶部：头像 + 名称 -->
              <view class="dynamic-header">
                <image 
                  class="avatar" 
                  :src="'/static/logo.png'"
                  mode="aspectFill"
                ></image>
                <view class="user-info">
                  <text class="name">{{ item.name }}</text>
                  <text class="time">{{ item.time }}</text>
                </view>
              </view>
              
              <!-- 中间：发布内容 -->
              <text class="content">{{ item.content }}</text>
              
              <!-- 发布的图片 -->
              <view class="image-grid">
                <view 
                  class="image-item" 
                  v-for="(img, imgIndex) in item.images" 
                  :key="imgIndex"
                  @click="previewImage(item.images, imgIndex)"
                >
                  <image 
                    :src="'/static/logo.png'"
                    mode="aspectFill"
                  ></image>
                </view>
              </view>
              
              <!-- 底部图标区域 -->
              <view class="action-bar">
                <!-- 点赞按钮：动态绑定图标颜色 -->
                <view class="action-item" @click="handleLike(index)">
                  <uni-icons 
                    type="hand-up-filled" 
                    size="25" 
                    :color="item.liked ? '#ff3333' : '#999'" 
                  ></uni-icons>
                  <text class="action-text">{{ item.likes }}</text>
                </view>
                <!-- <view class="action-item" @click="handleComment(index)">
                  <uni-icons type="chatbubble" size="25"></uni-icons>
                  <text class="action-text">{{ item.comments }}</text>
                </view> -->
                <view class="action-item" @click="handleShare(index)">
                  <uni-icons type="redo" size="25"></uni-icons>
                  <text class="action-text">{{ item.shares }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </swiper-item>
      
      <!-- 广场页面（布局与好友页面相同） -->
      <swiper-item>
        <view class="page square-page">
          <!-- 动态列表 -->
          <view class="dynamic-list">
            <view 
              class="dynamic-item" 
              v-for="(item, index) in squareDynamics" 
              :key="index"
            >
              <!-- 顶部：头像 + 名称 -->
              <view class="dynamic-header">
                <image 
                  class="avatar" 
                  :src="'/static/logo.png'"
                  mode="aspectFill"
                ></image>
                <view class="user-info">
                  <text class="name">{{ item.name }}</text>
                  <text class="time">{{ item.time }}</text>
                </view>
              </view>
              
              <!-- 中间：发布内容 -->
              <text class="content">{{ item.content }}</text>
              
              <!-- 发布的图片 -->
              <view class="image-grid">
                <view 
                  class="image-item" 
                  v-for="(img, imgIndex) in item.images" 
                  :key="imgIndex"
                  @click="previewImage(item.images, imgIndex)"
                >
                  <image 
                    :src="'/static/logo.png'"
                    mode="aspectFill"
                  ></image>
                </view>
              </view>
              
              <!-- 底部图标区域 -->
              <view class="action-bar">
                <!-- 点赞按钮：动态绑定图标颜色 -->
                <view class="action-item" @click="handleSquareLike(index)">
                  <uni-icons 
                    type="hand-up-filled" 
                    size="25" 
                    :color="item.liked ? '#ff3333' : '#999'" 
                  ></uni-icons>
                  <text class="action-text">{{ item.likes }}</text>
                </view>
                <!-- <view class="action-item" @click="handleSquareComment(index)">
                  <uni-icons type="chatbubble" size="25"></uni-icons>
                  <text class="action-text">{{ item.comments }}</text>
                </view> -->
                <view class="action-item" @click="handleSquareShare(index)">
                  <uni-icons type="redo" size="25"></uni-icons>
                  <text class="action-text">{{ item.shares }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </swiper-item>
    </swiper>

    <!-- 自定义右下角悬浮按钮 -->
    <view class="custom-fab" @click="handleFabClick">
      <text class="fab-icon">+</text>
    </view>
  </view>
</template>

<script setup>
import { getStatusBarHeight, getTitleBarHeight, getNavBarHeight, getLeftIconLeft } from "@/utils/system.js";
import { ref } from 'vue';

// 标签数据
const tabs = ['好友', '广场'];
// 当前激活的标签索引
const currentTab = ref(0);

// 好友动态数据
const friendDynamics = ref([
  {
    id: 1,
    avatar: '/static/logo.png',
    name: '张三',
    time: '10分钟前',
    content: '和朋友们一起去爬山，风景真好！',
    images: ['/static/logo.png', '/static/logo.png'],
    liked: false,
    likes: 18,
    comments: 5,
    shares: 2
  },
  {
    id: 2,
    avatar: '/static/logo.png',
    name: '李四',
    time: '2小时前',
    content: '推荐一本最近读的好书《人类简史》，很受启发。',
    images: ['/static/logo.png'],
    liked: true,
    likes: 32,
    comments: 12,
    shares: 8
  }
]);

// 广场动态数据（布局与好友相同，数据不同）
const squareDynamics = ref([
  {
    id: 101,
    avatar: '/static/logo.png',
    name: '摄影爱好者',
    time: '30分钟前',
    content: '城市日落摄影分享，捕捉光影的魅力～',
    images: ['/static/logo.png', '/static/logo.png', '/static/logo.png'],
    liked: false,
    likes: 45,
    comments: 18,
    shares: 15
  },
  {
    id: 102,
    avatar: '/static/logo.png',
    name: '美食达人',
    time: '1小时前',
    content: '自制下午茶，颜值与美味并存，教程稍后发布～',
    images: ['/static/logo.png', '/static/logo.png'],
    liked: false,
    likes: 62,
    comments: 24,
    shares: 20
  }
]);

// 切换标签逻辑
const switchTab = (index) => {
  currentTab.value = index;
};

// swiper 滑动时同步更新标签激活态
const swiperChange = (e) => {
  currentTab.value = e.detail.current;
};

// 好友动态点赞
const handleLike = (index) => {
  const item = friendDynamics.value[index];
  item.liked = !item.liked;
  item.likes += item.liked ? 1 : -1;
};

// 好友动态评论
const handleComment = (index) => {
  console.log('好友动态评论', index);
};

// 好友动态分享
const handleShare = (index) => {
  console.log('好友动态分享', index);
};

// 广场动态点赞
const handleSquareLike = (index) => {
  const item = squareDynamics.value[index];
  item.liked = !item.liked;
  item.likes += item.liked ? 1 : -1;
};

// 广场动态评论
const handleSquareComment = (index) => {
  console.log('广场动态评论', index);
};

// 广场动态分享
const handleSquareShare = (index) => {
  console.log('广场动态分享', index);
};

// 悬浮按钮点击事件
const handleFabClick = () => {
  uni.navigateTo({
  	url:"/pages/chat/dynamic"
  })
};

// 图片预览功能
const previewImage = (urls, current) => {
  uni.previewImage({
    urls: urls.map(() => '/static/logo.png'), 
    current: current
  });
};
</script>


<style lang="scss" scoped>
.layout {
  // 导航栏整体样式
 .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background-color: #fff;

   .statusBar {
      width: 100%;
      background-color: #fff;
    }

   .titleBar {
      display: flex;
      align-items: flex-end;
      padding: 0 30rpx;
    }

   .nav-tab {
      display: flex;
      width: 100%;
      border-bottom: 1px solid #f5f5f5;
    }

   .tab-item {
      flex: 1;
      text-align: center;
      padding: 24rpx 0;
      font-size: 34rpx;
      color: #333;
      position: relative;
      transition: all 0.3s ease;

      &.active {
        color: #2d7dfa;
        font-weight: 500;

        &::after {
          content: '';
          position: absolute;
          left: 50%;
          bottom: 0;
          width: 60rpx;
          height: 4rpx;
          background-color: #2d7dfa;
          transform: translateX(-50%);
          border-radius: 2rpx;
        }
      }
    }
  }

 .fill {
    width: 100%;
  }

 .content-swiper {
    width: 100%;
    height: calc(100vh - 120rpx);
  }

 .page {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding-bottom: 100rpx; 
  }

  // 好友页面与广场页面共用的动态列表样式
 .dynamic-list {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    padding: 0 20rpx;
  }

 .dynamic-item {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 24rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  }

 .dynamic-header {
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;
  }

 .avatar {
    width: 88rpx;
    height: 88rpx;
    border-radius: 50%;
    margin-right: 20rpx;
  }

 .user-info {
    display: flex;
    flex-direction: column;
  }

 .name {
    font-size: 32rpx;
    color: #333;
    font-weight: 500;
    margin-bottom: 6rpx;
    max-width: 500rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

 .time {
    font-size: 24rpx;
    color: #999;
  }

 .content {
    font-size: 28rpx;
    color: #333;
    line-height: 44rpx;
    margin-bottom: 20rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

 .image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12rpx;
    margin-bottom: 24rpx;
  }

 .image-item {
    aspect-ratio: 1/1;
    border-radius: 8rpx;
    overflow: hidden;
  }

 .image-item image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

 .action-bar {
    display: flex;
    justify-content: space-around;
    border-top: 1rpx solid #f5f5f5;
    padding-top: 16rpx;
  }

 .action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100rpx;
    height: 80rpx;
  }

 .action-text {
    font-size: 24rpx;
    color: #999;
    margin-top: 4rpx;
  }

  // 页面背景色区分
 .friend-page {
    background-color: #f8f8f8;
  }

 .square-page {
    background-color: #f5f5f5; 
  }

  // 自定义悬浮按钮样式
 .custom-fab {
    position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
    bottom: 30rpx;
    right: 30rpx;
    width: 100rpx;
    height: 100rpx;
    background-color: #007AFF;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;

    &:hover {
      transform: scale(1.1);
    }
  }

 .fab-icon {
    color: #fff;
    font-size: 25px;
    font-weight: bold;
  }
}
</style>